<template>
  <div class="tab-wrap flex-center" ref="tabsBar">
    <div
         :class="['tab-btn', !showTabBtn && 'tab-btn-hidden']"
         @click="handleMove(-1)">
      <Icon name="ArrowLeft" />
    </div>

    <ElScrollbar ref="refScroll"
                 class="flex-auto"
                 height="40px"
                 @scroll="handleScroll">
      <div ref="refScrollContent" class="inline-flex py-1 whitespace-nowrap">
        <div
             class="tab-item rounded-full"
             v-for="(item, index) in appTabsStore.tabsList"
             :key="item.path"
             :class="{
              'is-active': index == appTabsStore.acticeIndex,
              'is-disabled': appTabsStore.tabsList.length == 1,
            }"
             @click="changeTab(index)">
          <span class="ellipsis" :data-item="JSON.stringify(item)">{{ item.title }}
          </span>
          <Icon name="Close" class="tab-close" @click.stop="closeTab(index)" />
        </div>
      </div>
    </ElScrollbar>

    <div
         :class="['tab-btn', !showTabBtn && 'tab-btn-hidden']"
         @click="handleMove(1)">
      <Icon name="ArrowRight" />
    </div>

    <ElTooltip content="清除所有标签" placement="left">
      <div
           class="flex-center h-[32px] w-[32px] cursor-pointer hover:bg-black/10"
           @click="clearAllTabs">
        <Icon name="BrushFilled" />
      </div>
    </ElTooltip>
  </div>
</template>

<script setup lang="ts">
import { computed, useTemplateRef } from "vue";
import { ElScrollbar, ElTooltip } from "element-plus";

import Icon from "@/components/Icon.vue";

import useAppTabsStore from "../js/store";
import { useElementSize } from "@vueuse/core";

const appTabsStore = useAppTabsStore();
const { closeTab, changeTab, clearAllTabs } = appTabsStore;

const refScroll = useTemplateRef<Element>("refScroll");
const refScrollContent = useTemplateRef<Element>("refScrollContent");

// @ts-ignore
const { width: scrollWidth } = useElementSize(refScroll);

// @ts-ignore
const { width: scrollContentWidth } = useElementSize(refScrollContent);

const showTabBtn = computed(() => scrollContentWidth.value > scrollWidth.value);

// 移动
let distance = 0;
function handleMove(rate: number) {
  if (!showTabBtn.value) return;

  if (rate > 0) {
    const max = scrollContentWidth.value - scrollWidth.value - distance;
    distance += Math.min(scrollWidth.value, max);
  } else {
    distance -= scrollWidth.value;
    distance = Math.max(distance, 0);
  }

  refScroll.value?.scrollTo({
    left: distance,
    behavior: "smooth",
  });
}

// 保存实时滚动位移距离
const handleScroll = (e: any) => (distance = e.scrollLeft);
</script>

<style scoped lang="less">
@time: 200ms;

.tab {
  &-wrap {
    position: relative;
    background: var(--clr-tabbar-bg);
    box-shadow: 0 0 6px 6px var(--clr-app-content);
    z-index: 2;
  }

  &-btn {
    display: flex;
    align-items: center;
    padding: 0 1px;
    height: 32px;
    color: var(--clr-tabbtn-text);
    background: var(--clr-tabbtn-bg);
    transition-duration: @time;
    cursor: pointer;

    &:hover {
      color: var(--clr-tabbtn-text--hover);
      background: var(--clr-tabbtn-bg--hover);
    }

    &-hidden {
      opacity: 0;
      user-select: none;
    }
  }

  &-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 200px;
    height: 32px;
    padding: 0 20px;
    color: var(--clr-tabitem-text);
    background: var(--clr-tabitem-bg);
    user-select: none;
    cursor: pointer;
    transition-duration: @time;

    &+& {
      border-left: 1px solid var(--clr-tab-bd);
    }

    span {
      transition-duration: @time;
    }

    &:hover {
      color: var(--clr-tabitem-text--hover);
      background: var(--clr-tabitem-bg--hover);
      border-left-color: var(--clr-tabitem-bd--hover);

      span {
        transform: translate(-0.5em, 0);
      }

      .tab-close {
        transform: scale(1);
      }
    }

    &.is-active {
      // position: sticky;
      left: 0;
      right: 0;
      z-index: 1;

      color: var(--clr-tabitem-text--active);
      // background: var(--clr-tabitem-bg--active);
      background: #0056cfe6;
      border-left-color: var(--clr-tabitem-bd--active);

      .tab-close {
        background: var(--clr-tabitem-close-bg--active);
      }
    }

    &.is-disabled {
      .tab-close {
        transform: scale(0);
      }

      span {
        transform: translate(0, 0);
      }
    }

    .tab-close {
      position: absolute;
      right: 10px;
      top: 9px;
      width: 1em;
      height: 1em;
      border-radius: 4px;
      transform: scale(0);
      color: var(--clr-text);
      background: var(--clr-tabitem-close-bg);
      transition-duration: @time;

      &:hover {
        background: var(--clr-tabitem-close-bg--hover);
      }
    }
  }
}
</style>
